/*
 * @Description: 导入弹窗
 * @Author: Rfan
 * @Date: 2023-02-08 11:38:56
 * @LastEditTime: 2023-02-08 15:35:41
 */

import { useEffect, useState } from 'react';
import { Button, Modal, Space, Typography, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import classNames from 'classnames/bind';
import cs from 'classnames';
import { saveFolderLevel } from '@/api/accession';
import { uploadPath } from '@/api/upload';
import TransferTemplate from '@/components/TransferTemplate';
import { EnumTemplateTypes } from '@/view/system/TemplateManage/dictionaries';
import type { InputStatus } from 'antd/es/_util/statusUtils';
import type { UploadChangeParam } from 'antd/lib/upload';
import type { UploadFile } from 'antd/lib/upload/interface';
import type { ICommonDialog } from '@/interfaces/global';
import styles from '../../styles/importArchivesDialog.module.scss';

const cx = classNames.bind(styles);

interface ImportArchivesDialogProps extends ICommonDialog {
  baseInfo: any;
}

const ImportArchivesDialog = (props: ImportArchivesDialogProps) => {
  const { visible, baseInfo, onClose } = props;
  // 选中的模板
  const [selectTemplate, setSelectTemplate] = useState(null);
  // 模板选择框状态
  const [templateState, setTemplateState] = useState<InputStatus>('');
  // 已经上传的层级
  const [fileInfo, setFileInfo] = useState(null);
  // 当前层级是否已上传标志
  const [currentUploaded, setCurrentUploaded] = useState(false);
  // 上传错误信息
  const [uploadErrorFlag, setUploadErrorFlag] = useState(false);

  useEffect(() => {
    if (visible) {
      //
    }
  }, [visible]);

  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    setFileInfo(null);
    setCurrentUploaded(false);
    setUploadErrorFlag(false);
    setTemplateState('');
    onClose();
  };

  /**
   * @description: 上传变化回调
   * @param {any} info
   */
  const onChange = (info: UploadChangeParam<UploadFile>) => {
    const { file } = info;
    if (file.status === 'done') {
      setCurrentUploaded(true);
      setFileInfo(file.response);
      setUploadErrorFlag(false);
      setTemplateState('');
      // saveExcel(file, file.response);
    }
  };

  /**
   * @description:  开始导入条目
   */
  const saveExcel = () => {
    if (!setCurrentUploaded) {
      setUploadErrorFlag(true);
      !selectTemplate && setTemplateState('error');
      return false;
    }
    if (selectTemplate) {
      const params: any = {
        archiveTypeId: baseInfo.archiveTypeId,
        level: baseInfo.level,
        templateId: selectTemplate,
        fileUrl: fileInfo?.data?.url || ''
      };

      saveFolderLevel(params).then((res) => {
        // setLatestRecord(res.data);
      });
    } else {
      setTemplateState('error');
    }
  };

  return (
    <Modal
      title={`导入${baseInfo?.levelName}条目`}
      visible={visible}
      className={cx('upload-folder-dialog')}
      width={600}
      maskClosable={false}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
        <Button key="finish" type="primary" onClick={() => saveExcel()}>
          完成
        </Button>
      ]}
    >
      <p>
        档案类型：{baseInfo?.atName} - 层级：{baseInfo?.levelName}
      </p>
      <Space className={cx('select-template__wrap')}>
        <h4>请选择模板</h4>
        <TransferTemplate
          tplType={EnumTemplateTypes.ExcelImport}
          value={selectTemplate}
          templateState={templateState}
          onChange={setSelectTemplate}
        />
      </Space>
      <div className={cx('steps-wrap')}>
        <div className="steps-content">
          <Typography.Text className={cx('step--title')}>
            请上传{baseInfo?.levelName}条目
          </Typography.Text>
          {currentUploaded && <Typography.Text type="success">已上传</Typography.Text>}
          {uploadErrorFlag && <Typography.Text type="danger">请上传条目</Typography.Text>}
          <Upload
            accept=".xlsx,.csv,.xls"
            action={uploadPath}
            name="file"
            maxCount={1}
            className={cs(cx('upload-wrap'), cx('upload--current'))}
            onChange={onChange}
          >
            <Button icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
        </div>
      </div>
    </Modal>
  );
};

export default ImportArchivesDialog;
